<template>
    <view class="order-detail">
        <view class="header">
            {{ orderStatus(orderDetail.orderStatus) }}
        </view>
        <view class="base-info common-interval">
            <view class="common-title">
                <text class="common-title-line"/>
                <text>收货信息</text>
            </view>
            <view class="detail common-flex-between">
                <view style="flex: 0 0 610rpx;">
                    <view class="name">
                        <text>{{orderDetail.memberContactName}}</text>
                        <text style="margin-right: 37rpx;">{{orderDetail.memberContactPhone}}</text>
                    </view>
                    <view class="address">{{orderDetail.memberContactDetail}}</view>
                </view>
            </view>
        </view>
        <view class="order-info common-interval">
            <view class="common-title">
                <text class="common-title-line"/>
                <text>订单信息</text>
            </view>
            <order-book-card :books="orderDetail.booksHeadArr || []" :booksNum="orderDetail.booksNum" :orderId="orderDetail.orderId"/>
            <view class="deposit-info-wrapper">
                <view class="deposit-info" v-if="orderDetail.startTime">
                    <text>借阅日期</text>
                    <text class="common-little-font">{{ orderDetail.startTime | formatTime }}至{{ orderDetail.endTime | formatTime }}</text>
                </view>
                <view class="deposit-info">
                    <text>订单留言</text>
                    <text class="content common-little-font">{{orderDetail.memberNote || '暂无备注'}}</text>
                </view>
            </view>
        </view>
        <view class="payment-info-wrapper common-interval">
            <view class="common-title">
                <text class="common-title-line"/>
                <text>支付信息</text>
            </view>
            <view class="common-flex-between order-content">
                <text>支付方式</text>
                <text class="common-little-font">会员卡支付（{{orderDetail.vipCardMemberLogName}}）</text>
            </view>
            <view class="common-flex-between order-content">
                <text>订单编号</text>
                <text class="common-little-font">{{orderDetail.orderNum}}</text>
            </view>
            <view class="common-flex-between order-content">
                <text>订单时间</text>
                <text class="common-little-font">{{orderDetail.orderTrueTime | formatSecond}}</text>
            </view>
            <view class="btn-wrapper">
                <text class="common-blue-btn" @tap.stop="callHandle">拨打电话</text>
                <button :plain="true"
                        class="contact-btn"
                        open-type="contact"
                        @contact="contactInfo">
                    <text class="contact-txt">联系客服</text>
                </button>
            </view>
        </view>
        <view class="logistics-info-wrapper common-interval">
            <view class="common-title">
                <text class="common-title-line"/>
                <text>物流信息</text>
            </view>
            <view v-if="orderDetail.orderStatus > 23">
                <view class="common-flex-between order-content">
                    <text>物流公司</text>
                    <text class="common-little-font">{{logistics.edName || '暂无'}}</text>
                </view>
                <view class="common-flex-between order-content">
                    <text>物流单号</text>
                    <text class="common-little-font" @tap.stop="copyCode(logistics.edNum)">
                        {{logistics.edNum || '暂无'}}
                        <text class="copy">复制单号</text>
                    </text>
                </view>
                <view v-if="orderDetail.orderStatus === 40 || orderDetail === 50">
                    <view class="order-content" style="color: #2BA8FC;">归还图书</view>
                    <view class="common-flex-between order-content">
                        <text>物流公司</text>
                        <text class="common-little-font">{{returnLogistics.edName || '暂无'}}</text>
                    </view>
                    <view class="common-flex-between order-content">
                        <text>物流单号</text>
                        <text class="common-little-font" @tap.stop="copyCode(returnLogistics.edNum)">
                            {{returnLogistics.edNum || '暂无'}}
                            <text class="copy">复制单号</text>
                        </text>
                    </view>
                </view>
            </view>
            <view v-else class="no-data">
                <image src="https://img.thumbrary.com/empty.png"/>
                <text class="common-little-font">暂时还没有相关物流信息~</text>
            </view>
        </view>
        <view class="fix common-save-btn" v-if="orderDetail.orderStatus && orderDetail.orderStatus <= 28">
            <text class="common-txt" @tap="cancelOrder">取消订单</text>
        </view>
        <view class="fix btn-wrappers common-flex-between" v-if="orderDetail.orderStatus === 26 || orderDetail.orderStatus === 28">
            <text class="white-btn btns" @tap="watchLogistics">查看物流</text>
            <text class="blue-btn btns" @tap="receiveGoods">确认收货</text>
        </view>
        <view class="fix common-save-btn" v-if="orderDetail.orderStatus === 33 || orderDetail.orderStatus === 30">
            <text class="common-txt" @tap="returnBooks">去归还</text>
        </view>
        <gwShowModal
                v-model="showModal"
                type="tips"
                width="550rpx"
                height="260rpx"
                @confirm="confirmHandle"
                :tipsContent="tipsObj[modalType]"/>
    </view>
</template>

<script>
    import service from '@/service';
    import orderBookCard from './order-book-card'
    import gwShowModal from '@/pages/components/gw-show-modal'
    import { orderStatus } from '@/util/mock'
    import { dateFmt } from '@/util/utils';
    import { getConfInfo } from '@/util/commonFn'
    export default {
        name: "card",
        components: {orderBookCard, gwShowModal},
        onLoad(params){
            let { orderId } = params;
            this.orderId = orderId;
            this.getOrderDetail(orderId);
            this.inquiryLogistics();
            let that = this;
            getConfInfo().then(res => {
                that.phoneNumber = res.servicePhone
            })
        },
        onShow(){
            if(this.orderId){
                this.getOrderDetail(this.orderId);
                this.inquiryLogistics();
            }
        },
        data(){
            return{
                logistics: {
                    name: '222'
                },
                orderDetail: {},
                returnLogistics: {},
                orderStatus: orderStatus,
                state: 2,
                orderId: '',
                showModal: '',
                modalType: 'cancelOrder',
                tipsObj: {
                    cancelOrder: '确认取消该订单吗？'
                },
                phoneNumber: ''
            }
        },
        methods: {
            confirmHandle(){
                this.showModal = false;
                uni.showLoading({
                    title: ''
                })
                service.mineService.cancelOrder({
                    data: {
                        orderId: this.orderId
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            uni.showToast({
                                title: `取消订单成功`,
                                duration: 2500,
                                icon: 'none'
                            })
                            this.getOrderDetail(this.orderId);
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            })
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    method: 'GET'
                })
            },
            cancelOrder(){
                this.showModal = true;
            },
            inquiryLogistics(type){
                uni.showLoading({
                    title: '加载中'
                })
                service.mineService.inquiryLogistics({
                    data: {
                        orderId: this.orderId,
                        type: type || 2
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                           if(type === 1){
                               this.returnLogistics = res.result || {}
                               return
                           }
                            this.logistics = res.result || {}
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            })
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                })
            },
            contactInfo(){},
            returnBooks(){
                uni.navigateTo({
                    url: `./return-books?orderId=${this.orderId}`
                })
            },
            callHandle(){
                uni.makePhoneCall({
                    phoneNumber: this.phoneNumber //仅为示例
                });
            },
            // 复制物流单号
            copyCode(edNum){
                wx.setClipboardData({
                    data: edNum,
                    success: function(res) {
                        wx.getClipboardData({
                            success: function(res) {
                                console.log('复制内容为', res.data)
                            }
                        })
                    },
                })
            },
            // 查看物流
            watchLogistics(){
                uni.navigateTo({
                    url: `./logistics-info?orderId=${this.orderId}`
                })
            },
            // 确认收货
            receiveGoods(){
                uni.showLoading({
                    title: ''
                })
                service.mineService.receiveGoods({
                    data: {
                        orderId: this.orderId
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            uni.navigateBack(-1)
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            })
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                })
            },
            // 获取订单详情
            getOrderDetail(orderId) {
                uni.showLoading({
                    title: ''
                })
                service.mineService.booksOrder({
                    data: {
                        orderId
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.orderDetail = res.result || {}
                            if(this.orderDetail.orderStatus >= 40){
                                this.inquiryLogistics(1)
                            }
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            })
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    method: 'GET'
                })
            }
        },
        filters: {
            formatTime(value){
                return dateFmt( Number(value+'000'), 'yyyy-MM-dd')
            },
            formatSecond(value){
                return dateFmt( Number(value+'000'), 'yyyy-MM-dd hh:mm:ss')
            },
        }
    }
</script>

<style scoped lang="scss">
    .order-detail{
        min-height: 100%;
        background: #F9F9F9;
        padding-bottom: 120rpx;
        box-sizing: border-box;
        .header{
            height: 100rpx;
            color: #fff;
            font-size: 32rpx;
            background: #2BA8FC;
            padding-left: 50rpx;
            line-height: 100rpx;
        }
        .order-content{
            margin-top: 20rpx;
            .copy{
                color: #2BA8FC;
                margin-left: 20rpx;
            }
        }
        .base-info{
            background: #ffffff;
            padding-bottom: 37rpx;
            box-sizing: border-box;
            .detail{
               align-items: center;
            }
            .name{
                font-weight: bold;
            }
            .address{
                font-size: 24rpx;
                color: #999999;
                line-height: 33rpx;
                margin-top: 20rpx;
            }
        }
        .order-info{
            margin-top: 20rpx;
            padding-bottom: 64rpx;
            box-sizing: border-box;
            .deposit-info-wrapper{
                margin-top: 40rpx;
                border-top: 1rpx solid #E5E5E5;
                .deposit-info{
                    margin-top: 28rpx;
                    display: flex;
                    justify-content: space-between;
                }
                .content{
                    flex: 0 0 456rpx;
                    text-align: right;
                }
            }
        }
        .payment-info-wrapper{
            margin-top: 20rpx;
        }
        .btn-wrapper{
            margin-top: 38rpx;
            border-top: 1rpx solid #E5E5E5;
            height: 140rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            .contact-btn{
                border: none;
                padding: 6rpx 0;
                font-size: 28rpx;
                margin: 0;
            }
            .contact-txt{
                padding: 17rpx 35rpx;
                color: #2BA8FC;
                border: 1rpx solid #2BA8FC;
                border-radius: 37rpx;
            }
            .common-blue-btn{
                margin-right: 70rpx;
            }
        }
        .logistics-info-wrapper{
            margin-top: 20rpx;
            padding-bottom: 30rpx;
        }
        .no-data{
            display: flex;
            align-items: center;
            flex-direction: column;
            margin-top: -20rpx;
            image{
                width: 249rpx;
                height: 249rpx;
                margin-bottom: 15rpx;
            }
        }
        .btn-wrappers{
            bottom: 0;
            align-items: center;
            padding: 0 30rpx;
            height: 110rpx;
            .btns{
                padding: 18rpx 100rpx;
                border-radius: 44rpx;
            }
            .white-btn{
                border: 1rpx solid #2BA8FC;
                border-radius: 37rpx;
                color: #2BA8FC;
            }
            .blue-btn{
                color: #ffffff;
                background: #2BA8FC;
                border-radius: 37rpx;
            }
        }
    }
</style>